<template>
  <el-card class="user-stats-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>统计数据</span>
        <el-tooltip content="数据更新时间" placement="top">
          <span class="update-time">{{
            formatTime(new Date().toISOString())
          }}</span>
        </el-tooltip>
      </div>
    </template>

    <div class="stats-grid">
      <!-- 内容统计 -->
      <div class="stats-section">
        <h4>内容统计</h4>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-icon content">
              <IconifyIconOffline icon="ep:document" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.articleCount || 0) }}
              </div>
              <div class="stat-label">总文章</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon draft">
              <IconifyIconOffline icon="ep:edit-pen" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.draftCount || 0) }}
              </div>
              <div class="stat-label">草稿</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon deleted">
              <IconifyIconOffline icon="ep:delete" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.deletedCount || 0) }}
              </div>
              <div class="stat-label">已删除</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 互动统计 -->
      <div class="stats-section">
        <h4>互动统计</h4>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-icon views">
              <IconifyIconOffline icon="ep:view" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.totalViewCount || 0) }}
              </div>
              <div class="stat-label">总浏览</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon likes">
              <IconifyIconOffline icon="ep:star" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.totalLikeCount || 0) }}
              </div>
              <div class="stat-label">总点赞</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon comments">
              <IconifyIconOffline icon="ep:chat-line-round" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.totalCommentCount || 0) }}
              </div>
              <div class="stat-label">总评论</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon collects">
              <IconifyIconOffline icon="ep:collection" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.totalCollectCount || 0) }}
              </div>
              <div class="stat-label">总收藏</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 社交统计 -->
      <div class="stats-section">
        <h4>社交统计</h4>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-icon followers">
              <IconifyIconOffline icon="ep:user" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.followerCount || 0) }}
              </div>
              <div class="stat-label">粉丝</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon following">
              <IconifyIconOffline icon="ep:user-filled" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.followingCount || 0) }}
              </div>
              <div class="stat-label">关注</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 行为统计 -->
      <div class="stats-section">
        <h4>行为统计</h4>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-icon received-likes">
              <IconifyIconOffline icon="ep:star-filled" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.receivedLikeCount || 0) }}
              </div>
              <div class="stat-label">获得点赞</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon given-likes">
              <IconifyIconOffline icon="ep:star" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.givenLikeCount || 0) }}
              </div>
              <div class="stat-label">给出点赞</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon given-comments">
              <IconifyIconOffline icon="ep:chat-dot-round" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.commentGivenCount || 0) }}
              </div>
              <div class="stat-label">发出评论</div>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon received-comments">
              <IconifyIconOffline icon="ep:chat-line-round" />
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ formatNumber(stats?.commentReceivedCount || 0) }}
              </div>
              <div class="stat-label">收到评论</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { IconifyIconOffline } from "@/components/ReIcon";
import {
  formatNumber,
  formatTime,
  type UserStats
} from "@/api/admin-user-profile";

interface Props {
  stats?: UserStats | null;
}

defineProps<Props>();
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .user-stats-card {
    .stats-grid {
      .stats-section {
        .stats-row {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;

          .stat-item {
            padding: 8px;

            .stat-icon {
              width: 32px;
              height: 32px;
              font-size: 14px;
            }

            .stat-info {
              .stat-value {
                font-size: 16px;
              }

              .stat-label {
                font-size: 11px;
              }
            }
          }
        }
      }
    }
  }
}

.user-stats-card {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;

    .update-time {
      font-size: 12px;
      font-weight: normal;
      color: #64748b;
    }
  }

  .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .stats-section {
      h4 {
        padding-bottom: 8px;
        margin: 0 0 16px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
      }

      .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 16px;

        .stat-item {
          display: flex;
          gap: 12px;
          align-items: center;
          padding: 12px;
          background: #f9fafb;
          border-radius: 8px;
          transition: all 0.3s ease;

          &:hover {
            background: #f3f4f6;
            transform: translateY(-2px);
          }

          .stat-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            font-size: 18px;
            color: #fff;
            border-radius: 8px;

            &.content {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            &.draft {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            &.deleted {
              background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            }

            &.views {
              background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            }

            &.likes {
              background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            }

            &.comments {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            &.collects {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            &.followers {
              background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            }

            &.following {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            &.received-likes {
              background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            }

            &.given-likes {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            &.given-comments {
              background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            }

            &.received-comments {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }
          }

          .stat-info {
            flex: 1;
            min-width: 0;

            .stat-value {
              font-size: 18px;
              font-weight: 600;
              line-height: 1.2;
              color: #1f2937;
            }

            .stat-label {
              margin-top: 2px;
              font-size: 12px;
              color: #6b7280;
            }
          }
        }
      }
    }
  }
}
</style>
